<%@ page contentType="text/html;charset=UTF-8" import="java.util.*,com.hanma.bean.User" language="java" %>
<%@ page import="com.hanma.bean.News" %>
<%@ page import="com.hanma.bean.Comments" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>新闻详情页</title>
<script src="/message/home/js/jquery-3.4.1.min.js"></script>
<link href="/message/home/css/bootstrap.min.css" rel="stylesheet">
<link href="/message/home/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="/message/home/font/iconfont.css">
<link rel="stylesheet" href="/message/home/font/iconfont.css">
</head>
<%
	News news = (News)request.getAttribute("news");
	Integer uid = (Integer) session.getAttribute("uid");
	List<Comments> commentsList = (List<Comments>) request.getAttribute("commentsList");
	Integer num = commentsList.size();
%>
<%--<form action="comment.do?nid=<%=news.getId()%>" method="post">--%>
	<div class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<a href="index.jsp" class="navbar-brand"></a>
			</div>
			<label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label> <input class="hidden" id="toggle-checkbox" type="checkbox">
			<div class="hidden-xs">
				<ul class="navbar nav navbar-nav">
					<%
						if(uid != null){
					%>
					<li>
						<a href="/message/signIndex.do?cateId=0&uid=<%=uid%>">首页</a>
					</li>
					<%
						}
						if(uid == null){
					%>
					<li>
						<a href="/message/index.do?cateId=0">首页</a>
					</li>
					<%
						}
					%>
				</ul>
			</div>
		</div>
	</div>

<div class="container">
	<div class="col-md-8">
		<h1 class="news-title"><%=news.getTitle()%></h1>
		<div class="news-status">
			25k阅读·35分钟前发布
			<div class="label label-default">教育</div>
			<div class="label label-default">情感</div>
		</div>
		<div class="news-content">
			<blockquote>
				<p><%=news.getTitle()%></p>
			</blockquote>
			<div><%=news.getContent()%></div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="side-bar-card">
			<div class="card-title">相关推荐</div>
			<%
				List<News> newsList = (List<News>) request.getAttribute("newsList");
				for (News news1 : newsList){
			%>
			<div class="card-body">
				<div class="list">
					<div class="item clearfix">
						<div class="col-xs-5 no-padding-h">
							<img src="https://dummyimage.com/600x400/000/fff">
						</div>
						<div class="col-xs-7">
							<div class="title"><a href="newsSign.do?nid=<%=news1.getId()%>"><%=news1.getTitle()%></a></div>
							<div class="desc"><%=news1.getRecommend()%>阅读 <%=news1.getComment()%>评论</div>
						</div>
					</div>
				</div>
			</div>
			<%
				}
			%>
		</div>
		<div class="side-bar-card">
			<div class="card-title " >24小时热文</div>
			<div class="card-body" >
				<div class="list list1" >
					<%
						List<News> recList = (List<News>)request.getAttribute("recList");
						for (News news2 : recList){
					%>
					<div class="item">
						<div class="title"><a href="newsSign.do?nid=<%=news2.getId()%>"><%=news2.getTitle()%></a></div>
						<div class="desc"><%=news2.getRecommend()%>阅读 <%=news2.getComment()%>评论</div>
					</div>
					<%
						}
					%>
				</div>
			</div>

		</div>
	</div>
</div>

<div id="commentArea">
	<div class="comment_title">
		<div id="com2">评论<%=num%></div>
		<div>文明上网理性发言，请遵守《新闻评论服务协议》</div>
	</div>
	<div class="comment_info">
		<div class="comment_my">
			<img class="comment_my_head" src="${user.head == null ? '/message/home/img/4.jpeg' : user.head}" alt="我的头像">
			<div class="comment_my_right">
				<textarea class="comment_my_right_content" name="comment" id="comment" cols="80" rows="10" placeholder="友善评论哦！"></textarea>
				<button onclick="dianji()" type="submit" class="comment_my_right_submit">发表评论</button>
					<span id="tishi" color="red"></span>
			</div>
		</div>
		<div class="comment_other">
			<div class="other_people" id="other_people">
				<%
					for (Comments comments : commentsList){
				%>
				<div class="other_prople_top">
					<img class="other_prople_top_head" src="<%=comments.getImg()%>" alt="其他用户头像">
					<div class="other_prople_top_name"><%=comments.getNickname()%></div>
				</div>
				<div class="other_prople_bottom">
					<div class="other_prople_bottom_content"><%=comments.getComment()%></div>
					<div class="other_prople_bottom_time">
						<div>来自双旦新闻网友</div>
						<div>2023-9-5</div>
					</div>
				</div>
				<%
					}
				%>
			</div>
		</div>

	</div>
</div>

<div id="footer">
	<div>©2020 Baidu (京)-经营性-2017-0020京公网安备11000002000001号京ICP证030173号</div>
</div>
<%--</form>--%>
<script src="/message/home/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	$("#footer").load("/message/home/common/footer.html", function () {
		$("#footer div").addClass("footer");
	});

	function dianji() {
		var nid =<%=news.getId()%>
		var comment = $("#comment").val()
		var commentNum =<%=num%>
		var url = "/message/getComment.do"
		var postDate = {
			nid: nid,
			comment: comment,
			msg: false,
			msg1: false,
			commentNum: commentNum
		}
		$.get(url, postDate, function (date) {
			var recList = date.recList;
			console.log(recList);
			$("#comment").val("");
			if (date.msg) {
				$("#tishi").html(date.msg)
			} else {
				if (date.msg1) {
					$("#tishi").html(date.msg1)
				} else {
					$("#tishi").html("")
					$("#other_people").prepend('<div class="other_prople_top">'
							+ '<img class="other_prople_top_head" src=' + date.img + ' alt="其他用户头像">' +
							'<div class="other_prople_top_name">' + date.nickname + '</div>' + '</div>'
							+ '<div class="other_prople_bottom">' + '<div class="other_prople_bottom_content">' + date.comment + '</div>' +
							'<div class="other_prople_bottom_time">' + '<div>来自双旦新闻网友</div>' +
							'<div>2023-9-5</div>' + '</div>' + '</span>')
					$("#com2").html("评论" + date.commentNum)
					$(".list1").html('')
					recList.forEach(function (item) {
						$(".list1").append('<div className="list">'+'<div className="item">'
								+'<div className="title">' + '<a href="newsSign.do?nid=' + item.id +'">'
								+ item.title + '</a>' + '</div>' + '<div className="desc">' + item.recommend + '阅读' + item.comment
								+ '评论' + '</div>'+'</div>'+'</div>')
					})
				}
			}
		}, "json")
	}
</script>
<%--<script>--%>
<%--	$("#footer").load("/message/home/common/footer.html", function() {--%>
<%--		$("#footer div").addClass("footer");--%>
<%--	});--%>
<%--</script>--%>
<style>
	/* 评论区 */
	#commentArea {
		/* border: 1px solid red; */
		width: 1100px;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
}

.comment_title {
	display: flex;
	align-items: center;
}

.comment_title div:nth-child(1) {
	font-size: 24px;
	font-weight: bold;
}

.comment_title div:nth-child(2) {
	margin-left: 15px;
	color: #999999;
}

/* 我的评论 */
.comment_info {
	width: 100%;
	margin: 10px auto;
	display: flex;
	flex-direction: column;
}

.comment_my {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.comment_my_head {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.comment_my_right {
	width: 92%;
	height: 150px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.comment_my_right_content {
	resize: none;
	border-radius: 10px;
	background-color: #f8f8f8;
	border: none;
	outline: none;
	box-sizing: border-box;
	padding: 0 30px;
	font-size: 24px;
	margin-bottom: 51px;
}

.comment_my_right_submit {
	width: 150px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-radius: 10px;
	color: #FFFFFF;
	background-color: #cccccc;
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 0;
}

.comment_other {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}

.other_people {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.other_prople_top {
	display: flex;
	align-items: center;
}

.other_prople_top_head {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.other_prople_top_name {
	margin-left: 20px;
	cursor: pointer;
	color: rgb(155, 157, 14);
}

.other_prople_bottom {
	margin-left: 80px;
	display: flex;
	flex-direction: column;
}

.other_prople_bottom_content {
	font-size: 24px;
}

.other_prople_bottom_time {
	color: #999999;
	font-size: 16px;
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.other_prople_bottom_time div:nth-child(2) {
	margin-left: 20px;
}
</style>
</body>

</html>